<template>
  <div v-if="caseInfo" id="case-history-container">
    <div class="crumb"><crumb/></div>
    <div class="main">
      <left-panel
        :case-request="caseInfo.caseRequest"
        :training-num="caseInfo.trainingNum"
        :training-rank-list="caseInfo.trainingRankList"
        :case-name="caseInfo.caseName"></left-panel>
      <right-panel
        :rank="parseInt(caseInfo.rank)"
        :score="parseFloat(caseInfo.score)"
        :historyTrainingList="caseInfo.historyTrainingList"
        :duration="parseFloat(caseInfo.duration)"></right-panel>
    </div>
  </div>
</template>

<script>
import leftPanel from './components/caseHistory/leftPanel'
import rightPanel from './components/caseHistory/rightPanel'
import { getCaseHistoryInfo } from '@/api/student/training/multiple'
export default {
  name: 'caseHistory',
  data () {
    return {
      resourceCaseId: null,
      caseInfo: null
    }
  },
  methods: {
    async caseHistoryInfo () {
      const res = await getCaseHistoryInfo({
        resourceCaseId: this.resourceCaseId
      })
      if (!res) return
      this.caseInfo = res
    }
  },
  created () {
    this.resourceCaseId = this.$route.query.resourceCaseId
    this.caseHistoryInfo()
  },
  components: {
    leftPanel, rightPanel
  }
}
</script>

<style scoped lang="scss">
#case-history-container{
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  .crumb{
    width: 1200px;
  }
  .main{
    width: 1200px;
    height: 700px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
